<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="__CSS__/layui.css">
    <link rel="stylesheet" href="__CSS__/common.css"/>
</head>
<body>
<div class="header">
    <div class="container">
        <div class="logo">
            <img src="__IMG__/logo.png" alt="">
        </div>
        <div class="tool">
            <div class="breadcrumb">
                <div class="Weather">
                    <iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&amp;id=12&amp;icon=1&amp;num=5"> </iframe>
                </div>
                <div class="Calendar" style=""><b><img src="__IMG__/Calendar.png"></b>
                   <div id="date">17年3月14日</div><font color="#f85455">星期<span id="wk">二</span></font>&nbsp;<span id="clk">2:13</span><br>农历<span id="nongli">二月十七</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="nav bule">
    <div class="container bule">
        <ul class="layui-nav bule" lay-filter="">
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/home.png" alt="">
                    </i>
                    <span>首页</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/examine.png" alt="">
                        <small>1</small>
                    </i>
                    <span>审批收件</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/face.png" alt="">
                        <small>2</small>
                    </i>
                    <span>审批进度</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/flie.png" alt="">
                        <small>23</small>
                    </i>
                    <span>历史订单</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/folder.png" alt="">
                    </i>
                    <span>文件夹</span>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="">
                    <i>
                        <img src="__IMG__/tender.png" alt="">
                        <small>12</small>
                    </i>
                    <span>竞标</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="left-slide">
    <ul>
        <li>
            <a class="con">
                <p>
                    <i class="layui-icon">&#xe62d;</i>
                </p>
                <p>报表</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p>
                    <i class="layui-icon">&#xe645;</i>
                    <small>4</small>
                </p>
                <p>通知</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p><i class="layui-icon">&#xe614;</i>
                 </p>
                <p>设置</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p><i class="layui-icon">&#xe607;</i>
                  </p>
                <p>帮助</p>
            </a>
        </li>
        <li>
            <a href="#">
                <p><i class="layui-icon">&#xe631;</i>
                    </p>
                <p>快捷键</p>
            </a>
        </li>
    </ul>
</div>

<div class="main">
    <div class="container">
        <div class="main-top">
            <form class="layui-from">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="" id="">
                            <option value="1" selected>标准产品</option>
                            <option value="1" >标准产品</option>
                            <option value="1" >标准产品</option>
                            <option value="1" >标准产品</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="" id="">
                            <option value="1" selected>标准产品</option>
                            <option value="1" >标准产品</option>
                            <option value="1" >标准产品</option>
                            <option value="1" >标准产品</option>
                        </select>
                    </div>
                    <div class="layui-input-inline big-input">
                        <input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
                        <button class="layui-btn  layui-btn-normal">
                            <i class="layui-icon">&#xe615;</i></button
                    </div>
                </div>
        </div>
        </form>
    </div>
    <div class="center  layui-btn layui-btn-big layui-btn-normal">
        <p>搜索不到产品？</p>
        <p>点击此处自由描述下单</p>
    </div>
    <div class="main-bottom">
        <div class="layout" id="layout" data-index='0'>
            <ul>
                <li id="layou-li">
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="project">
                        <a href="#">
                            <div class="img">
                                <img src="./__IMG__/project.png" alt="">
                            </div>
                            <div class="text">
                                <h4 class="red bold">
                                    ￥3000.00
                                </h4>
                                <p>苹果ipad mini MD531 CH/A平板电脑</p>
                            </div>
                        </a>
                    </div>
                </li>

            </ul>
        </div>
        <div class="toolbar left">
            <a href="javascript:;" id="left">
                <i class="layui-icon">&#xe603;</i>
            </a>
        </div>
        <div class="toolbar right">
            <a href="javascript:;" id="right">
                <i class="layui-icon">&#xe602;</i>
            </a>
        </div>
    </div>
</div>
</div>

<script type="text/javascript" src='__JS__/jquery.min.js'></script>
<script>
    function $(ele){
        var getSymbol = ele.slice(0,1);
        if( getSymbol == '#' ){
            return document.getElementById(ele.substring(1,ele.length))
        }else if( getSymbol == '.' ){
            return document.getElementsClassName(ele.substring(1,ele.length)[0])
        }else{
            return document.getElementsTagName(ele)[0]
        }
    }
    // 事件
    var addEvent = function( dom,type,handle,capture ){
        if(dom.addEventListener){
            dom.addEventListener(type,handle,capture)
        }else if(dom.attachEvent){
            dom.attachEvent('on',type,handle)
        }
    }
    //样式
    var getStyle = function(dom,attr){
        return dom.currentStyle ? dom.cuurentStyle[attr] : getComputedStyle(dom,false)[attr];
    }
    var layout = $('#layout'),
            getLiWidth = $('#layou-li').offsetWidth,
            getLiLength = document.querySelectorAll('#layout li').length;
    totalWidth = getLiWidth * getLiLength;
    console.log(getLiWidth)
    layout.style.width = totalWidth + 'px';
    var nowLeft = getLiWidth * 4,
            right = $('#right'),left = $('#left');
    addEvent(right, 'click', function(){
        var step = parseInt(getStyle($('#layout'),'left'));
        var go = step;
        var timer = setInterval(function(){
            go += 15;
            if( go > 0 || go > step + nowLeft  ){
                clearInterval(timer);
                return;
            }
            layout.style.left = go + 'px';
        },10)
    });
    addEvent(left, 'click', function(){
        var step = parseInt(getStyle($('#layout'),'left'));
        var go = step;
        var timer = setInterval(function(){
            go -= 15;
            if( go < step - nowLeft || go < -totalWidth + nowLeft ){
                clearInterval(timer);
                return;
            }
            layout.style.left = go + 'px';
        },10)
    });

</script>
</body>
</html>